import { previewModule } from '@/services/api/api-user-analysis';
import ProCard from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import { useEffect, useState } from 'react';
import style from './index.less';
import { Skeleton, Spin } from 'antd';
interface PreviewModuleProps { }

const PreviewModule: React.FC<PreviewModuleProps> = ({ }) => {
  const [responsive, setResponsive] = useState(false);
  const categoryItem = [
    {
      name: "市委宣传部",
      class: style.市委宣传部,
    },
    {
      name: "中央媒体",
      class: style.中央媒体
    },
    {
      name: "市属媒体",
      class: style.市属媒体
    },
    {
      name: "市外媒体",
      class: style.市外媒体
    },
    {
      name: "市级部门",
      class: style.市级部门
    },
    {
      name: "区县",
      class: style.区县
    },
    {
      name: "社会团体",
      class: style.社会团体
    },
    {
      name: "高等院校",
      class: style.高等院校
    },
    {
      name: "央企或在渝企业",
      class: style.央企或在渝企业
    },
    {
      name: "国有企业",
      class: style.国有企业
    },
    {
      name: "其他",
      class: style.其他
    },
  ]
  /**
   * 本月选题计划(单位数据)
   */
  const [data, setDataState] = useState<MonitorUserData.PreviewModule[]>([]);

  useEffect(() => {
    loadData();
  }, []);

  /**
   * 本月选题计划
   */
  const loadData = async () => {
    try {
      const response = await previewModule();
      if (response.code === 0) {
        setDataState(response.data);
      }
    } catch (error) { }
  };

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        {data.length <= 0 ? <Skeleton active > </Skeleton> : <></>}
        {data?.map((item, index) => (
          <>
            <ProCard
              title={
                <>
                  {item.title}
                </>}
              direction={'row'}
              className={style.userData}
            >
              <ProCard
                bodyStyle={{
                  paddingLeft: '100px',
                  paddingRight: '5px',
                  width: '200px',
                  height: '100px',
                  color: 'white'
                }}
                // layout='center'
                className={index === 0 ? style.totalUser1 : style.totalUser2}
              >
                <h3 style={{ marginTop: '5px' }}>全部{item.item.title}</h3>
                <h2 style={{ color: 'white', marginTop: -20 }}>{item.item.count}</h2>
              </ProCard>
              {item.list?.map((child) => {
                return categoryItem.map((item: any) => {
                  if (item.name === child.title) {
                    return (
                      <>
                        <ProCard
                          bodyStyle={{
                            paddingLeft: '0px',
                            paddingRight: '0px',
                            height: 100,
                          }}
                          layout='center'
                          direction="column"
                          className={item.class}
                          style={{ marginLeft: 10 }}
                        >
                          <h4>{child.title}</h4>
                          <h3 style={{ color: '#5FA2F0', marginTop: 0 }}>{child.count}</h3>
                        </ProCard>
                      </>
                    )
                  }
                })
              })}
            </ProCard>
            <br />
          </>
        ))}
      </RcResizeObserver>
    </>

  );
};

export default PreviewModule;
